import React, { Component } from "react";
import { Empty } from 'antd'
import {
  Axis,
  Chart,
  Tooltip,
  Interval,
  Legend
} from "bizcharts";
import { joinDimensionField, formatterUnitOfData, isValueEmpty, joinDimensionField_stock } from '@/utils/utils'



export default class GroupInterval extends Component {
  constructor() {
    super()
    this.state = {
      position: '',
      valueName: 'new_square'
    }
  }

  componentWillReceiveProps(nextProps) {
    const { data, staticts, params, charts,dataType } = nextProps
    //params:{
    //   purpose: (6)["商品房", "住宅", "商业", "办公", "车位", "其他"]
    //   region: []
    //   staticts: (2)["面积", "套数"]
    //   __proto__: Object
    // }
    const result = dataType == '1' ? joinDimensionField('new', [staticts]) : joinDimensionField_stock([staticts])//[new_square,new_area]
    const position = charts + '*' + result[staticts][0] || 'new_square'
    // console.log(position)

    this.setState({
      position,
      valueName: result[staticts][0]
    })
  }

  render() {
    const { position, valueName } = this.state
    const positionArr = position.split('*')
    const { staticts, data=[] } = this.props
    const scale = {
      [positionArr[1]]: {
        formatter: (val) => {
          const { value, unit } = formatterUnitOfData(staticts, val, true)
          if (value) {
            return value + unit;
          }
          return 0
        }
      }
    }

    const dataRowNumber = (list = []) => {
      list.forEach(item => {
        item[valueName] = parseFloat(item[valueName])
      })
      return list
    }
    return (
      <>
        {isValueEmpty(this.state.valueName, dataRowNumber(data)) ?
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> :
          <Chart padding="auto" data={dataRowNumber(data)} scale={scale} autoFit='true'>
            <Interval
              adjust={[
                {
                  type: 'dodge',
                  marginRatio: 0,
                },
              ]}
              color={['born_type', ["#3C77C3", "#68E7FB", "#5fbbea", "#64c4ed"]]}
              position={position}
              tooltip={[position + '*born_type', (x, y, z) => {
                const { value, unit } = formatterUnitOfData(staticts, y)
                return {
                  name: z,
                  value: value + unit,
                };
              }]}
            />
            <Tooltip shared />
            <Legend position='top'
              itemName={{
                style: {
                  fill: "white",
                }
              }} />
            <Axis
              name={positionArr[0]}
              label={{ autoRotate: false }}
            />
            <Axis
              name={positionArr[1]}
              grid={false}
            />
          </Chart>
        }
      </>
    )
  }

}
